/**
 * Created by 小敏哥 on 2017/4/21.
 */
import React, {Component} from 'react';
import jsApi from '../../utils/cx580.jsApi';
import style from './pageBar.scss';
import urlOperation from "../../utils/urlOperation";
import appVersion from "../../utils/appVersion";

class PageBar extends Component {
    constructor(props) {
        super(props);
        //由app调用
        /* window.cxyControlTitleLayout = function () {
             jsApi.call({
                 "commandId": "",
                 "command": "controlTitleLayout",
                 "data": {
                     "showStatus": "hide",
                 }
             }, (data) => {
             });
         };*/
        //返回webview时关闭原生导航栏
        if (this.isShowBar()) {
            window.cxyPageResume = function () {
                if (props.appPageResume) {
                    props.appPageResume();
                }
                else {
                    jsApi.call({
                        "commandId": "",
                        "command": "controlTitleLayout",
                        "data": {
                            "showStatus": "hide",
                        }
                    }, (data) => {
                    });
                }
            }
        }
    }


    static propTypes = {
        back: React.PropTypes.func,//自定义后退方法
        title: React.PropTypes.string,//标题
        isHome: React.PropTypes.bool,//是否首页，点击直接关闭webview
        appPageResume: React.PropTypes.func//app从其他地方跳转到当前页面时的自定义方法，可选
    };


    componentDidMount() {
        if (this.isShowBar()) {
            //隐藏原生导航条
            if (navigator.userAgent.indexOf("appname_cxycwz") > -1) {
                //隐藏右侧功能按钮
                setTimeout(() => {
                    jsApi.call({
                        "commandId": "",
                        "command": "controlTitleLayout",
                        "data": {
                            "showStatus": "hide",
                        }
                    }, (data) => {
                    });
                }, 200)
            }
           
        }
        //隐藏右侧功能按钮
        if (navigator.userAgent.indexOf("appname_cxycwz") > -1) {
            //隐藏右侧功能按钮
            setTimeout(() => {
                jsApi.call({
                    "commandId":"",
                    "command":"customizeTopRightButton",
                    "data":{
                        "list":[]}
                },function(data){})
            }, 200)
        }
       
    }


    //返回
    goBack() {
        if (this.props.back) {
            this.props.back();
        }
        else {
            if (this.props.isHome) {
                jsApi.call(
                    {
                        "commandId": "",
                        "command": "close"
                    });
            }
            else {
                //为了使history.length靠谱，必须推入一个空栈
                history.pushState({}, '', '');
                if (history.length >= 3) {
                    history.go(-2);
                }
                else {
                    //当前没有可后退页面时直接关闭
                    jsApi.call(
                        {
                            "commandId": "",
                            "command": "close"
                        });
                }
            }
        }
    }

    //是否显示头部，
    isShowBar() {
        let u = navigator.userAgent;
        if (u.indexOf('appname_cxycwz/') > -1) {
            if (appVersion.getMainVersionByCount()<6.33) {
                return true; //6.3以下启用自定义头部，之后的版本弃用
            }
            else {
                return false;
            }
        }
        return false;
    }

    //此处对ios6.3.0到6.3.1之间的版本做兼容，用于增加浏览器头部20px的高度，防止自定义头部被覆盖
    isShowLittleBar() {
        return appVersion.getMainVersionByCount() < 6.32 && appVersion.getMainVersionByCount() >= 6.3&&navigator.userAgent.indexOf('AppleWebKit')>-1;
    }

    render() {
        let containerStyle=this.isShowLittleBar()?{marginTop:'20px'}:{};
        let barStyle=this.isShowLittleBar()?{paddingTop:'20px'}:{};
        return this.isShowBar() ? <div className={style.container} style={containerStyle}>
            <div className={style.pageBar} style={barStyle}>
                <button onClick={() => {
                    this.goBack();
                }} className={style.pageButton}><img src="./images/back.png"/></button>
                <div>{this.props.title}</div>
            </div>
        </div> : <div></div>
    }
}

export default PageBar;